<template>
	<view>
		<view class="page-container">
			<!-- 底层图片 -->
			<image src="/pages/Car/static/图层1@2x.png" class="bg-image" mode="widthFix" />

			<!-- 上层内容 -->
			<view class="top-content">
				<view class="navigator">维修详情</view>
				
				<!-- 维修信息区域 -->
				<view class="carView info-section">
					<view class="section-title">维修信息</view>
					<view class="info-item">
						<text class="info-label">维修单号:</text>
						<text class="info-value">3535252</text>
					</view>
					<view class="info-item">
						<text class="info-label">维修状态:</text>
						<text class="info-value status-active">已完成</text>
					</view>
					<view class="info-item">
						<text class="info-label">车主姓名:</text>
						<text class="info-value">张</text>
					</view>
					<view class="info-item">
						<text class="info-label">联系方式:</text>
						<text class="info-value">1993829282</text>
					</view>
					<view class="info-item">
						<text class="info-label">维修方式:</text>
						<text class="info-value">上门取车</text>
					</view>
					<view class="info-item">
						<text class="info-label">取车位置:</text>
						<text class="info-value">山阳区32号</text>
					</view>
					<view class="info-item">
						<text class="info-label">预约日期:</text>
						<text class="info-value">2022/11/10 11:00</text>
					</view>
					<view class="info-item">
						<text class="info-label">提交日期:</text>
						<text class="info-value">2022/11/08 12:34</text>
					</view>
				</view>
				
				<!-- 车辆信息区域 -->
				<view class="carView info-section">
					<view class="section-title">车辆信息</view>
					<view class="info-item">
						<text class="info-label">车辆类型:</text>
						<text class="info-value">大客车</text>
					</view>
					<view class="info-item">
						<text class="info-label">车牌号:</text>
						<text class="info-value">豫A45323</text>
					</view>
					
					<!-- 整车照片 -->
					<view class="image-group">
						<text class="info-label">整车照片:</text>
						<view class="image-container">
							<image src="/pages/maintenance/static/car01.png" class="car-img" mode="widthFix" />
						</view>
					</view>
					
					<!-- 维修部位照片 -->
					<view class="image-group">
						<text class="info-label">维修部位照片:</text>
						<view class="images-row">
							<image src="/pages/maintenance/static/car01.png" class="part-img" mode="widthFix" />
							<image src="/pages/maintenance/static/car01.png" class="part-img" mode="widthFix" />
							<image src="/pages/maintenance/static/car01.png" class="part-img" mode="widthFix" />
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style scoped>
	/* 父容器 */
	.page-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 50rpx;
	}

	/* 底层图片 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}

	/* 上层内容 */
	.top-content {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		padding-top: 40rpx;
	}

	.navigator {
		display: flex;
		justify-content: center;
		color: white;
		margin-bottom: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.carView {
		background-color: #fff;
		margin: 30rpx 20rpx 0rpx 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}
	
	
	
	/* 信息区域样式 */
	.info-section {
		display: flex;
		flex-direction: column;
	}
	
	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 30rpx;
		padding-bottom: 15rpx;
		border-bottom: 2rpx solid #f1f3f4;
	}
	
	.info-item {
		display: flex;
		padding: 15rpx 0;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.info-label {
		width: 200rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.info-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		opacity: 0.4;
	}
	
	/* 图片展示区域 */
	.image-group {
		display: flex;
		flex-direction: column;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f1f3f4;
	}
	
	.image-group:last-child {
		border-bottom: none;
	}
	
	.image-container {
		margin-top: 15rpx;
	}
	
	.images-row {
		display: flex;
		gap: 15rpx;
		margin-top: 15rpx;
	}
	
	.car-img {
		width: 300rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	
	.part-img {
		flex: 1;
		height: 150rpx;
		border-radius: 10rpx;
	}
	
</style>